Create a static HTML web app in Azure #

Azure App Service provides a highly scalable, self-patching web hosting service. This quickstart shows how to deploy a basic HTML+CSS site to Azure App Service. You’ll complete this quickstart in Cloud Shell, but you can also run these commands locally with Azure CLI.

Use Azure Cloud Shell #

Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. You can use either Bash or PowerShell with Cloud Shell to work with Azure services. You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

To start Azure Cloud Shell:

Option	Example / link
Select Try It in the upper-right corner of a code block. Selecting Try It doesn’t automatically copy the code to Cloud Shell
Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser
Select the Cloud Shell button on the top-right menu bar in the Azure portal

To run the code in this sample in Azure Cloud Shell:

1. Start Cloud Shell.

2. Select any code block to copy the code.

3. Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

4. Select Enter to run the code.

Download the sample #

In the Cloud Shell, create a quickstart directory and then change to it.

    mkdir quickstart
    cd $HOME/quickstart

Next, run the following command to clone the sample app repository to your quickstart directory.

    git clone https://github.com/Azure-Samples/html-docs-hello-world.git

Create a web app #

Change to the directory that contains the sample code and run the az webapp up command.

In the following example, replace <app_name> with a unique app name.

    cd html-docs-hello-world
    az webapp up --location westeurope --name <app_name>

The az webapp up command does the following actions:

• Create a default resource group.
• Create a default app service plan.
• Create an app with the specified name.
• Zip deploy files from the current working directory to the web app.

This command may take a few minutes to run. While running, it displays information similar to the following example:

    {
    "app_url": "https://<app_name>.azurewebsites.net",
    "location": "westeurope",
    "name": "<app_name>",
    "os": "Windows",
    "resourcegroup": "appsvc_rg_Windows_westeurope",
    "serverfarm": "appsvc_asp_Windows_westeurope",
    "sku": "FREE",
    "src_path": "/home/<username>/quickstart/html-docs-hello-world ",
    < JSON data removed for brevity. >
    }

Make a note of the resourceGroup value. You need it for the clean up resources section.

Browse to the app #

In a browser, go to the app URL: http://<app_name>.azurewebsites.net.

The page is running as an Azure App Service web app.

Congratulations! You’ve deployed your first HTML app to App Service.

Update and redeploy the app #

In the Cloud Shell, type nano index.html to open the nano text editor. In the <h1> heading tag, change “Azure App Service - Sample Static HTML Site” to “Azure App Service”, as shown below.

Save your changes and exit nano. Use the command ^O to save and ^X to exit.

You’ll now redeploy the app with the same az webapp up command.

    az webapp up --location westeurope --name <app_name>

Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and refresh the page.

Manage the Azure App #

To manage the web app, go to the Azure portal, and search for and select App Services.

On the App Services page, select the name of your web app.

You see your web app’s Overview page. Here, you can do basic management like browse, stop, start, restart, and delete.

The left menu provides different pages for configuring your app.

Clean up resources #

In the preceding steps, you created Azure resources in a resource group. If you don’t expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell. Remember that the resource group name was automatically generated for you in the create a web app step.

    az group delete --name appsvc_rg_Windows_westeurope

This command may take a minute or two to run.